<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>vue3</title>
	</head>
	<body>
		<div id="app">
			<p>{{num}}</p>
			<button id="btn">按钮</button>
		</div>

		<script src="./effect.js"></script>
		<script src="./track.js"></script>
		<script src="./trigger.js"></script>
		<script src="./reactive.js"></script>

		<script>
			debugger;
			// 定义一个响应式数据
			const state = reactive({
				num: 0,
			});

			// 定义一个使用到响应式数据的 dom更新函数
			function updateDom() {
				document.querySelector("#app p").textContent = state.num;
			}
			// 用effect声明更新函数
			effect(updateDom);

			// 定时变更响应式数据
			document.getElementById("btn").onclick = function () {
				state.num++;
			};
		</script>
	</body>
</html>
